<template>
  <div>
    <main>
      <!-- 背景图 -->
      <section class="banner">
        <div class="container">
          <div class="row">
            <div class="col-lg-12">
              <div class="page-title-content">
                <h3 class="title">News</h3>
                <nav>
                  <ol>
                    <li><a href="#">Home</a></li>
                    <li class="active">News</li>
                  </ol>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 新闻介绍 -->
      <section class="news-area">
        <div class="container">
          <div class="row">
            <div class="col-lg-4">
              <div class="news-item" v-for="item in list" :key="item.url">
                <div class="news-thumb">
                  <img :src="item.url" alt="" />
                </div>
                <div class="news-content">
                  <span>3 April, 2020</span>
                  <ul>
                    <li>Admin</li>
                    <li>2 Comments</li>
                  </ul>
                  <h3>A day in the life of entrepreneur & co-founders</h3>
                  <a href="#">--></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          url: require('../../../assets/news-item-1.jpg'),
        },
        {
          url: require('../../../assets/news-item-2.jpg'),
        },
        {
          url: require('../../../assets/news-item-3.jpg'),
        },
        {
          url: require('../../../assets/news-item-4.jpg'),
        },
        {
          url: require('../../../assets/news-item-5.jpg'),
        },
        {
          url: require('../../../assets/news-item-6.jpg'),
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
}
.banner {
  background-image: url('../../../assets/page-title-bg.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  margin-top: 110px;
  height: 330px;
  .container {
    max-width: 1200px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    .row {
      display: flex;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
      .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        .page-title-content {
          height: 330px;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          &:before {
            position: absolute;
            content: '';
            left: 0;
            bottom: 0;
            height: 37px;
            width: 37px;
            background: #29f0b4;
          }
          .title {
            font-size: 60px;
            color: #fff;
            line-height: 1.2;
            font-family: 'Abril Fatface', cursive;
            font-weight: 400;
            margin: 0px;
          }
          nav {
            display: inline-block;
            ol {
              background-color: transparent;
              padding: 0;
              margin: 0;
              display: flex;
              flex-wrap: wrap;
              list-style: none;
              border-radius: 0.25rem;
              li {
                font-size: 18px;
                font-weight: 500;
                color: #fff;
                display: flex;
                a {
                  color: #fff;
                }
              }
              .active:before {
                color: #fff;
                content: '.';
                display: inline-block;
                padding-right: 0.5rem;
              }
            }
          }
        }
      }
    }
  }
}
.news-area {
  padding-top: 90px;
  padding-bottom: 120px;
  display: block;
  .container {
    max-width: 1200px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    .row {
      margin-right: -15px;
      margin-left: -15px;
      .col-lg-4 {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center !important;
        flex-wrap: wrap;
        .news-item {
          flex: 0 0 33.333333%;
          max-width: 30%;
          margin-top: 30px;
          padding-right: 15px;
          padding-left: 15px;
          .news-thumb {
            img {
              width: 100%;
              max-width: 100%;
              vertical-align: middle;
              border-style: none;
            }
          }
          .news-content {
            background: #f7f7f9;
            padding: 50px 44px 0px 50px;
            span {
              line-height: 30px;
              color: #fff;
              background: #674df0;
              padding: 0 15px;
              font-size: 11px;
              font-weight: 500;
              letter-spacing: 2px;
              text-transform: uppercase;
              margin-bottom: 13px;
              display: inline-block;
            }
            ul {
              margin: 0px;
              padding: 0px;
              list-style-type: none;
              li {
                display: inline-block;
                font-size: 14px;
                color: #838694;
              }
            }
            h3 {
              font-size: 30px;
              padding-right: 10px;
              line-height: 40px;
              padding-top: 24px;
              padding-bottom: 35px;
              transition: all 0.3s ease-out 0s;
              cursor: pointer;
              font-weight: 400;
              color: #1b1f2e;
              margin: 0px;
              &:hover {
                color: #674df0;
              }
            }
            a {
              height: 59px;
              width: 59px;
              text-align: center;
              line-height: 59px;
              background: #fff;
              color: #a4a6b1;
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
</style>
